<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Router</title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
    header,
    footer {
        height: 100px;
        background: #ccc;
    }

    section {
        width: 60%;
        height: 400px;
        background: #eee;
        float: left;
    }

    sidebar {
        width: 40%;
        height: 400px;
        background: #999;
        float: left;
    }

    .clear {
        clear: both;
    }
    </style>
</head>

<body>
    <header>
        头部
    </header>
    <section>
        <ul>
            <li><a href="#/">全部</a></li>
            <li><a href="#/html">html课程</a></li>
            <li><a href="#/css">css课程</a></li>
            <li><a href="#/javascript">javascript课程</a></li>
        </ul>
    </section>
    <sidebar>
        右边
    </sidebar>
    <div class="clear"></div>
    <footer>
        底部
    </footer>
    <script type="text/javascript" src="html/jquery.js"></script>
    <script type="text/javascript" src="js/router.js"></script>
    <script type="text/javascript">
    var oRouter = new Router();
    oRouter.init();
    oRouter.map('/', function() {
        var oSidebar = document.querySelector("sidebar");
        oSidebar.innerHTML = 'ghostwu提供html,css,javascript从0基础到精通系列课程，只要会开关机，就能学会';
    });
    oRouter.map('/html', function() {
        var oSidebar = document.querySelector("sidebar");
        oSidebar.innerHTML = 'ghostwu提供html5从入门到精通的课程';
    });
    oRouter.map('/css', function() {
        var oSidebar = document.querySelector("sidebar");
        oSidebar.innerHTML = 'ghostwu提供从入门到玩转css3课程';
    });
    oRouter.map('/javascript', function() {
        var oSidebar = document.querySelector("sidebar");
        oSidebar.innerHTML = "ghostwu提供从0基础到精通javascript系列课程";
    });
    </script>
</body>

</html>